<template>
    <div>
        <el-drawer
            class="drawer-order-detail"
            title="调用详情"
            :visible.sync="show"
            direction="rtl"
            size="60%"
            @close="close"
            append-to-body
        >
            <div class="drawer-content-item">
                <el-tabs v-model="tabsCurrent" type="card">
                    <el-tab-pane label="基本信息" name="1">
                        <div class="flex-between-center">
                            <div class="item-title-box">基本信息</div>
                            <div class="flex-align-center">
                                <el-button
                                    class="mar-r-20"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="isEdit = true"
                                    v-if='!isEdit'
                                    >编辑</el-button>
                                <el-button
                                    class="mar-r-20"
                                    type="text"
                                    icon="el-icon-back"
                                    @click="isEdit = false"
                                    v-else
                                    >取消</el-button>
                                <el-button
                                    class="mar-r-20"
                                    type="text"
                                    icon="el-icon-check"
                                    @click="onHandleSubmit()"
                                    >保存</el-button
                                >
                            </div>
                            
                        </div>
                        
                        <el-form ref="form" :model="form"  label-position="top">
                            <el-row :gutter="20" class="form-detail-top-box">
                                <!-- <el-col :span="6">
                                    <el-form-item label="身份证正面：">
                                        <imagePreview :url="form.idCardFrontPhoto"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="身份证反面：">
                                        <imagePreview :url="form.idCardBackPhoto"/>
                                    </el-form-item>
                                </el-col> -->
                                
                                <el-col :span="6">
                                    <el-form-item label="订单编号：">
                                        {{ form.taskNo  || '-'}}
                                    </el-form-item>
                                </el-col>
                                
                                <el-col :span="6">
                                    <el-form-item label="任务开始时间：">{{ form.createTime  || '-'}}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="任务结束时间：">{{ form.endTime || '-' }}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="第三方任务ID：">
                                        <el-input
                                            v-model="form.thirdOrderNo"
                                            placeholder="请输入第三方任务ID"
                                            v-if="isEdit"
                                            >
                                         </el-input>
                                        <span v-else> {{ form.thirdOrderNo  || '-'}}</span>
                                       
                                        
                                    </el-form-item>
                                </el-col>
                                 <el-col :span="6">
                                    <el-form-item label="真实姓名：">
                                         <el-input
                                            v-model="form.realName"
                                            placeholder="请输入真实姓名"
                                            v-if="isEdit"
                                            >
                                         </el-input>
                                         <span v-else>{{ form.realName  || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="身份证号：">
                                        <el-input
                                            v-model="form.idCard"
                                            placeholder="请输入身份证号"
                                            v-if="isEdit"
                                            >
                                         </el-input>
                                        <span v-else>{{ form.idCard  || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                               
                                <el-col :span="6">
                                    <el-form-item label="手机号：">
                                        <el-input
                                            v-model="form.phone"
                                            placeholder="请输入手机号"
                                            v-if="isEdit"
                                            >
                                         </el-input>
                                        <span v-else>{{ form.phone || '-' }}</span>
                                    </el-form-item>
                                </el-col>
                                
                                <el-col :span="6">
                                    <el-form-item label="车牌号：">
                                         <el-input
                                            v-model="form.carNumber"
                                            placeholder="请输入车牌号"
                                            v-if="isEdit"
                                            >
                                         </el-input>
                                        <span v-else>{{ form.carNumber  || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                                
                               
                                
                               
                                
                                <el-col :span="6">
                                    <el-form-item label="客户进行双录时间：">{{ form.cuStartDrTime  || '-'}}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="推送状态：">
                                        <el-tag type="primary" v-if="form.pushMdStatus == 0">待推送</el-tag>
                                        <el-tag type="success" v-if="form.pushMdStatus == 1">推送成功</el-tag>
                                        <el-tag type="danger" v-if="form.pushMdStatus == 2">推送失败</el-tag>
                                        <el-button type="primary" @click="onHandlePush" size="mini" v-if="form.isCanPushMdManual == 1" style="margin-left: 10px;">推送</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-if="form.pushMdStatus == 2">
                                    <el-form-item label="推送失败原因：">
                                        {{ form.pushFailReason  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="任务大类状态：">
                                        <el-tag size="small" type="warning" v-if="form.taskBigStatus == 1">任务待处理</el-tag>
                                        <el-tag size="small" type="success" v-if="form.taskBigStatus == 3">任务完成</el-tag>
                                        <el-tag size="small" type="danger" v-if="form.taskBigStatus == 6">任务取消</el-tag>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="推送时间：">{{ form.pushTime  || '-'}}</el-form-item>
                                </el-col>
                                
                                
                               
                            </el-row>
                            
                        </el-form>
                        <div class="item-title-box">视频信息</div>
                        <el-form ref="form" :model="form"  label-position="top">
                            <el-row :gutter="20" class="form-detail-top-box">
                                 <!-- <el-col :span="6">
                                    <el-form-item label="回答的全程视频时长：">
                                        {{ form.answerFullVideoDuration  || '-'}}秒
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="回答的全程视频封面：">
                                        <imagePreview :url="form.answerFullVideoCover"/>
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="24">
                                    <el-form-item label="回答的全程视频：">
                                        <div class="img-box">
                                            <el-image :src="form.answerFullVideoCover" :preview-src-list="[form.answerFullVideoCover]" class="img-list" v-if="form.answerFullVideoCover"></el-image>
                                            <img src="../../../assets/images/empty-icon.png" class="img-list" v-else>
                                            <!-- <el-image :src="form.answerFullVideoCover" :preview-src-list="[form.answerFullVideoCover]" class="img-list"></el-image> -->
                                            <!-- <imagePreview :url="form.answerFullVideoCover" /> -->
                                            <el-button  type="primary" @click="showVideo(form.answerFullVideoUrl)" size="mini" plain   class="mar-t-10" v-if="form.answerFullVideoUrl">预览</el-button>   
                                            <el-button  type="primary" @click="download(form.answerFullVideoUrl)" size="mini" plain   class="mar-t-10" v-if="form.answerFullVideoUrl">下载</el-button> 
                                            <el-button  type="primary" @click="onHandleClickShow" size="mini" plain   class="mar-t-10" v-if="form.isCanUpVideoManual == 1">手动上传录像</el-button>   

                                        </div>
                                        <div>回答的全程视频时长：{{ formatSeconds(form.answerFullVideoDuration ) || '-'}}</div>                                                           
                                    </el-form-item>
                                </el-col>
                                
                                
                            </el-row>
                        </el-form>
                        <div class="item-title-box">合同信息</div>
                        <el-form ref="form" :model="form"  label-position="top">
                            <el-row :gutter="20" class="form-detail-top-box">
                                <el-col :span="6">
                                    <el-form-item label="放款金额：">{{ form.loanMount ||0 }}元</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="放款期限：">{{ form.term || '-' }}期</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="每期还款金额：">{{ form.monthlyPayment || '-' }}元</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="放款企业名称：">{{ form.companyName  || '-'}}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="放款企业客服热线：">{{ form.customerHotline  || '-'}}</el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="产品名称：">
                                        {{ form.cpName  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="资方名称：">
                                        {{ form.zfName  || '-'}}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div class="item-title-box">节点流程</div>
                        <el-table :data="tableList" max-height="400">
                            <el-table-column
                            label="操作记录ID"
                            align="center"
                            prop="drTaskOperationRecordId"
                            />
                            <el-table-column
                                label="处理时间"
                                align="center"
                                prop="createTime"
                                width="200"
                            />
                            <el-table-column label="状态" align="center" width="250">
                                <template slot-scope="scope">
                                    <el-tag
                                        :type="[3,6,8].includes(scope.row.status) ? 'danger' :[1,7].includes(scope.row.status) ? 'warning' : [4,2].includes(scope.row.status) ? 'success' : 'primary'"
                                    > {{ selectDictLabel(dict.type.operate_type_group,scope.row.status) }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="操作备注"
                            align="center"
                            prop="remark"
                            />
                        </el-table>
                        <pagination
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getOperateList"
                        >
                        </pagination>
                    </el-tab-pane>
                    <el-tab-pane label="门店信息" name="2" v-if="isShowShop">
                         <el-form ref="form" :model="form"  label-position="top">
                            <el-row :gutter="20" class="form-detail-top-box">
                                
                                <el-col :span="6">
                                    <el-form-item label="门店ID：">
                                        {{ form.menDian.menDianId  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="门店名称：">
                                        {{ form.menDian.name  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="联系人姓名：">
                                        {{ form.menDian.leaderName  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="联系人电话：">
                                        {{ form.menDian.leaderPhone  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="身份证号：">
                                        {{ form.menDian.leaderIdCard  || '-'}}
                                    </el-form-item>
                                </el-col>
                                 <el-col :span="6">
                                    <el-form-item label="可用余额：">
                                        {{ form.menDian.point  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="扣分单价：">
                                        {{ form.menDian.drConsumePerPoint  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="双录预警金额：">
                                        {{ form.menDian.drWarnningPoint  || '-'}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="门店地址：">
                                        {{ form.menDian.provinceName}}{{ form.menDian.cityName}}{{ form.menDian.countyName }}{{ form.menDian.address }}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-drawer>
        <el-dialog
            :visible.sync="dialogVisible"
            title="预览"
            width="800"
            append-to-body
            @closed="closeVideo"
            >
            <video controls width="100%" height="300" ref="videoPlayer">
                <source :src="videoUrl" type="video/mp4" />
                您的浏览器不支持视频播放。
            </video>
        </el-dialog>
        <el-dialog
            :visible.sync="isShowUpload"
            title="手动上传录像"
            width="800"
            append-to-body
            @closed="isShowUpload = false"
            >
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="24" >
                        <el-form-item  label="录像" prop="videoUrl">
                            <fileUpload  v-model="addForm.videoUrl" :limit="1" :fileSize="500"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
             <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="isShowUpload = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script>
    import {cozeDetail,getOperateList,upVideoManual,pushMdManual,editAiCoze} from '@/api/orderManage/orderList'

    export default{
        dicts: ['operate_type_group'],
        props: {
            id: {
                type: [String,Number],
                default: ''
            },
            isShowShop : {
                type:Boolean,
                default: false
            }
        },
        data() {
            return {
                show: false,
                form: {menDian: {}},
                tabsCurrent: '1',
                dialogVisible: false,
                videoUrl: '',
                queryParams: {
                    pageSize: 10,
                    pageNum:1
                },
                tableList:[],
                loading: false,
                total: 0,
                isShowUpload: false,
                rules: {
                    videoUrl :[
                         { required: true, message: "请先上传录像信息", trigger: "change" }
                    ]
                },
                addForm: {},
                isEdit : false
            }
        },
        
        methods: {
            onHandleSubmit() {
                if(!this.form.phone || !this.form.idCard || !this.form.carNumber || !this.form.thirdOrderNo || !this.form.realName){
                    this.$modal.msgError('请先将数据填写完整')
                    return
                }
                editAiCoze(this.form).then(res=> {
                    this.getDetail();
                    this.isEdit = false
                    this.$modal.msgSuccess("编辑成功");
                })
            },
            onHandlePush() {
                let _this = this
                this.$modal.confirm('是否确认手动推送？').then(function() {
                    return pushMdManual({taskId: _this.id});
                }).then(() => {
                    this.getDetail();
                    this.$modal.msgSuccess("推送成功");
                }).catch(() => {});
            },
            submitForm() {
                this.$refs["addForm"].validate(valid => {
                    if (valid) {
                       let jsons = JSON.parse(JSON.stringify(this.addForm))
                       console.log(jsons)
                       jsons.videoUrl = JSON.parse(jsons.videoUrl)[0].url
                        upVideoManual(jsons).then(res=> {
                            this.$modal.msgSuccess(res.msg)
                            this.isShowUpload = false
                            this.getDetail()
                        })
                    }
                })
            },
            onHandleClickShow() {
                this.addForm = {
                    taskId : this.id,
                    videoUrl: ''
                }
                this.isShowUpload = true
            },
            formatSeconds(seconds) {
                const totalSeconds = Math.floor(seconds); // 取整
                const minutes = Math.floor(totalSeconds / 60);
                const remainingSeconds = totalSeconds % 60;
                return `${minutes} 分钟 ${remainingSeconds} 秒`;
            },
            download(url) {
                window.open(url)
            },
            closeVideo() {
                this.dialogVisible = false
                this.videoUrl = ''
                this.$refs.videoPlayer.pause();
            },
            showVideo(url) {
                this.videoUrl = url
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.$refs.videoPlayer.load(); // 重新加载视频
                });
            },
            getDetail() {
                cozeDetail({aiCozeId: this.id}).then(response => {
                    this.form = response.data || {};
                    this.show = true;
                });
                this.getOperateList()
            },
            getOperateList() {
                this.queryParams.taskId = this.id
                this.loading = true
                getOperateList(this.queryParams).then(res => {
                    this.total = res.data.total
                    this.loading = false
                    this.tableList = res.data.records
                })
            },
            close() {
                this.show = false
            }
        }
    }
</script>
<style lang="scss" scoped>
    .img-box{
        display: flex;
        /* align-items: center; */
        align-items: flex-end;
        margin-bottom: 19px;
        .img-list{
           width: 100px;
           margin-right: 19px;
        }
    }
</style>